<template>
  <ContentWrap>
    <el-tabs v-model="tabType">
      <el-tab-pane label="基本设置" name="basic" />
      <el-tab-pane label="分佣比例" name="percent" />
    </el-tabs>
    <el-form
      ref="formRef"
      :rules="formRules"
      :model="formData"
      label-width="100px"
      v-loading="readLoading"
    >
      <el-form-item v-if="tabType == 'basic'" label="功能开关" prop="enabled">
        <el-switch
          v-model="formData.enabled"
          :active-value="true"
          :inactive-value="false"
          active-text="开启"
          inactive-text="关闭"
          disabled
        />
      </el-form-item>
      <el-form-item v-if="tabType == 'basic' && formData.enabled" label="分佣时机" prop="moment">
        <el-radio-group v-model="formData.moment">
          <el-radio :label="1">支付成功时</el-radio>
          <!-- <el-radio :label="2">交易完成时</el-radio> -->
        </el-radio-group>
        <span v-if="formData.moment == 2" class="text-[12px] text-[#999] ml-[10px]">
          商城购物支付成功后需确认收货，收货后才算交易完成。
        </span>
      </el-form-item>
      <el-form-item
        v-if="tabType == 'basic' && formData.enabled"
        label="佣金冻结天数"
        prop="frozenDays"
      >
        <el-input
          v-model="formData.frozenDays"
          type="number"
          class="!w-90px"
          :min="0"
          :max="30"
          :step="1"
        >
          <template #suffix>
            <span>天</span>
          </template>
        </el-input>
        <span class="text-[12px] text-[#999] ml-[10px]">
          避免退货退款等情况发生后无法返还分佣。
        </span>
      </el-form-item>
      <el-form-item
        v-if="tabType == 'percent' && formData.enabled"
        label="消费一级分佣"
        prop="fatherPercent"
      >
        <el-input
          v-model="formData.fatherPercent"
          type="number"
          class="!w-90px"
          :min="0"
          :max="100"
          :step="1"
          :precision="2"
        >
          <template #suffix>
            <span>%</span>
          </template>
        </el-input>
        <span class="text-[12px] text-[#999] ml-[10px]">
          用户购买产品或在联盟商家消费的分佣比例，例如：1.5%，填写 1.5
        </span>
      </el-form-item>
      <el-form-item
        v-if="tabType == 'percent' && formData.enabled"
        label="消费二级分佣"
        prop="grandpaPercent"
      >
        <el-input
          v-model="formData.grandpaPercent"
          type="number"
          class="!w-90px"
          :min="0"
          :max="100"
          :step="1"
          :precision="2"
        >
          <template #suffix>
            <span>%</span>
          </template>
        </el-input>
        <span class="text-[12px] text-[#999] ml-[10px]">
          用户购买产品或在联盟商家消费的分佣比例，例如：1%，填写 1
        </span>
      </el-form-item>
      <el-form-item
        v-if="tabType == 'percent' && formData.enabled"
        label="会员费一级分佣"
        prop="vipFeeFatherPercent"
      >
        <el-input
          v-model="formData.vipFeeFatherPercent"
          type="number"
          class="!w-90px"
          :min="0"
          :max="100"
          :step="1"
          :precision="2"
        >
          <template #suffix>
            <span>%</span>
          </template>
        </el-input>
        <span class="text-[12px] text-[#999] ml-[10px]">
          用户充值会员费的分佣比例，例如：15%，填写 15
        </span>
      </el-form-item>
      <el-form-item
        v-if="tabType == 'percent' && formData.enabled"
        label="会员费二级分佣"
        prop="vipFeeGrandpaPercent"
      >
        <el-input
          v-model="formData.vipFeeGrandpaPercent"
          type="number"
          class="!w-90px"
          :min="0"
          :max="100"
          :step="1"
          :precision="2"
        >
          <template #suffix>
            <span>%</span>
          </template>
        </el-input>
        <span class="text-[12px] text-[#999] ml-[10px]">
          用户充值会员费的分佣比例，例如：5%，填写 5
        </span>
      </el-form-item>
      <el-form-item
        v-if="tabType == 'percent' && formData.enabled"
        label="招商费一级分佣"
        prop="agencyFeeFatherPercent"
      >
        <el-input
          v-model="formData.agencyFeeFatherPercent"
          type="number"
          class="!w-90px"
          :min="0"
          :max="100"
          :step="1"
          :precision="2"
        >
          <template #suffix>
            <span>%</span>
          </template>
        </el-input>
        <span class="text-[12px] text-[#999] ml-[10px]">
          招商人员缴纳年费的分佣比例，例如：15%，填写 15
        </span>
      </el-form-item>
      <el-form-item
        v-if="tabType == 'percent' && formData.enabled"
        label="招商费二级分佣"
        prop="agencyFeeGrandpaPercent"
      >
        <el-input
          v-model="formData.agencyFeeGrandpaPercent"
          type="number"
          class="!w-90px"
          :min="0"
          :max="100"
          :step="1"
          :precision="2"
        >
          <template #suffix>
            <span>%</span>
          </template>
        </el-input>
        <span class="text-[12px] text-[#999] ml-[10px]">
          招商人员缴纳年费的分佣比例，例如：5%，填写 5
        </span>
      </el-form-item>
      <el-form-item
        v-if="tabType == 'percent' && formData.enabled"
        label="商家营业额分佣"
        prop="shopIncomePercent"
      >
        <el-input
          v-model="formData.shopIncomePercent"
          type="number"
          class="!w-90px"
          :min="0"
          :max="100"
          :step="1"
          :precision="2"
        >
          <template #suffix>
            <span>%</span>
          </template>
        </el-input>
        <span class="text-[12px] text-[#999] ml-[10px]">
          招商人员获得商家营业收入销售额的分佣比例，例如：1%，填写 1
        </span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveConfig" :loading="saveLoading">保存</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
</template>

<script lang="ts" setup>
import * as ConfigApi from '@/api/brokerage/config'
import { TabsPaneContext } from 'element-plus'

defineOptions({ name: 'BrokerageConfig' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const tabType = ref('basic')

const formRules = reactive({})
const formRef = ref()
const readLoading = ref(true)
const formData = ref<any>({
  enabled: true,
  moment: 0,
  frozenDays: 0,
  posterUrl: '',
  fatherPercent: 0,
  grandpaPercent: 0,
  shopIncomePercent: 0,
  vipFeeFatherPercent: 0,
  vipFeeGrandpaPercent: 0,
  agencyFeeFatherPercent: 0,
  agencyFeeGrandpaPercent: 0
})
const loadConfig = async () => {
  readLoading.value = true
  try {
    const data = await ConfigApi.getConfig()
    if (data === null) {
      return
    }
    Object.assign(formData.value, data)
  } finally {
    readLoading.value = false
  }
}

const saveLoading = ref(false)
const saveConfig = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  saveLoading.value = true
  try {
    await ConfigApi.saveConfig(formData.value)
    message.success(t('common.updateSuccess'))
    await loadConfig()
  } catch (error) {
    console.log(error)
  }
  saveLoading.value = false
}

onMounted(async () => {
  await loadConfig()
})
</script>
